<html>
<head>
    <#assign basePath=request.contextPath>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>后台管理系统</title>
    <link href="${basePath}/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/form.lzy.css" rel="stylesheet">
    <link href="${basePath}/bootstrap/css/good.lzy.css" rel="stylesheet">
    <link rel="icon" href="${basePath}/images/favicon.png" type="image/x-icon" />
    <link rel="shortcut icon" href="${basePath}/images/favicon.png" type="image/x-icon" />
    <link rel="bookmark" href="${basePath}/images/favicon.png" type="image/x-icon" />
</head>
<body style="background-color: #F2F2F2;">

<div class="panel panel-f5 tenants">
    <h1>恭喜您注册成功，请完善以下资料</h1>
    <div class="panel-body row tip-con">

        <form id="myForm" class="form-horizontal"  method="post" enctype="multipart/form-data">
            <input type="hidden" id="_ctx" value="${basePath}"/>
            <div class="form-group">
                <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>申请身份类型：</span>
                <div class="col-sm-9 col-xs-7">
                    <select id="module" name="type" class="form-control">
                        <option value="">请选择</option>
                        <option value="1" data-name="group-trip">旅游创客</option>
                        <option value="2" data-name="group-play">玩什么项目商家</option>
                        <%--<option value="3" data-name="group-shop">商城商家</option>--%>
                        <option value="4" data-name="group-club">俱乐部房车租赁</option>
                        <option value="5" data-name="group-person">个人房车租赁</option>
                        <option value="6" data-name="group-car">房车生产商</option>
                    </select>
                </div>
            </div>
            <div class="group-box">
                <div class="form-group module-tip group-trip">
                    <span class="control-label col-sm-3 col-xs-5 detail-span">旅游创客说明：</span>
                    <div class="col-sm-9 col-xs-7">
                        遍布全国各地的旅游达人，热情好客，对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务。
                        对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务
                        对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务
                    </div>
                </div>
                <div class="form-group module-tip group-play">
                    <span class="control-label col-sm-3 col-xs-5 detail-span">玩什么项目商家说明：</span>
                    <div class="col-sm-9 col-xs-7">
                        遍布全国各地的旅游达人，热情好客，对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务。
                    </div>
                </div>
                <%--<div class="form-group module-tip group-shop">--%>
                <%--<span class="control-label col-sm-3 col-xs-5 detail-span">商城商家说明：</span>--%>
                <%--<div class="col-sm-9 col-xs-7">--%>
                <%--遍布全国各地的旅游达人，热情好客，对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务。--%>
                <%--</div>--%>
                <%--</div>--%>
                <div class="form-group module-tip group-club">
                    <span class="control-label col-sm-3 col-xs-5 detail-span">俱乐部房车租赁说明：</span>
                    <div class="col-sm-9 col-xs-7">
                        遍布全国各地的旅游达人，热情好客，对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务。
                    </div>
                </div>
                <div class="form-group module-tip group-person">
                    <span class="control-label col-sm-3 col-xs-5 detail-span">个人房车租赁说明：</span>
                    <div class="col-sm-9 col-xs-7">
                        遍布全国各地的旅游达人，热情好客，对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务。
                    </div>
                </div>
                <div class="form-group module-tip group-car">
                    <span class="control-label col-sm-3 col-xs-5 detail-span">房车生产商说明：</span>
                    <div class="col-sm-9 col-xs-7">
                        遍布全国各地的旅游达人，热情好客，对当地生活及文化见解独到，是资深的玩乐达人，探索旅途中的无尽体验，可为客户打造个性化的专属旅程服务。
                    </div>
                </div>
                <div class="form-group group-trip group-person">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>姓名：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="name" value="" type="text" maxlength="20" placeholder="请输入您的姓名，最少2字符">
                    </div>
                </div>
                <div class="form-group group-trip group-person">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>身份证号：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="cardId" value="" type="text" maxlength="18" placeholder="请输入您的身份证号">
                    </div>
                </div>
                <div class="form-group group-play group-club group-car">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>企业名称：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="companyName" value="" type="text" maxlength="20" placeholder="请输入您的企业姓名">
                    </div>
                </div>
                <div class="form-group group-car">
                    <span class="control-label col-sm-3 col-xs-5 detail-span">房车品牌：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="carBrand" value="" type="text" maxlength="20">
                    </div>
                </div>
                <div class="form-group group-play">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>店铺名称：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="shopName" value="" type="text" maxlength="20">
                    </div>
                </div>
                <div class="form-group group-club">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>负责人姓名：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="legalName" value="" type="text" maxlength="20">
                    </div>
                </div>
                <div class="form-group group-club">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>负责人联系方式：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="legalTel" value="" type="text" maxlength="20">
                    </div>
                </div>
                <div class="form-group group-common">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>手机号码：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input id="tel" class="form-control" size="30" name="tel" value="" type="text" maxlength="11" placeholder="手机号为账号，请认真填写">
                        <div class="tel-code">
                            <input id="code" class="form-control" size="10" name="code" value="" type="text" maxlength="6" autocomplete="off" placeholder="短信验证码">
                            <span class="code-btn">获取验证码</span>
                        </div>
                    </div>
                </div>
                <div class="form-group group-common">
                    <span class="control-label col-sm-3 col-xs-5 detail-span"><font color="red">*</font>登录密码：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="password" value="" type="password" maxlength="18" placeholder="8-20个字符，不能包含空格">
                    </div>
                </div>
                <div class="form-group group-trip">
                    <span class="control-label col-sm-3 col-xs-5 detail-span">导游证号：</span>
                    <div class="col-sm-9 col-xs-7">
                        <input class="form-control" size="30" name="legally" value="" type="password" maxlength="18">
                    </div>
                </div>
                <div class="form-group group-trip">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>有无车：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="radio" name="carFlag" value="1" > 有车 &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="carFlag" value="0" checked> 无车
                    </div>
                </div>
                <div class="form-group car-brand">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>车辆品牌：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="brandName" value="" maxlength="25">
                    </div>
                </div>
                <div class="form-group group-play group-car">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>联系人：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="linkMan" value="" maxlength="25">
                    </div>
                </div>
                <div class="form-group group-play group-car">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>企业电话：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="companyTel" value="" maxlength="25">
                    </div>
                </div>
                <div class="form-group group-person">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>行驶证编号：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="text" class="form-control" size="30" name="driving" value="" maxlength="25">
                    </div>
                </div>
                <div class="form-group group-common">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>所在城市：</span>
                    <div class="col-sm-9 col-xs-8 area">
                        <#include "../common/selectCity.ftl">
                            <#assign name="proviceVale" value="" />
                            <#assign name="provinceName" value="province" />
                            <#assign name="cityName" value="city" />
                            <#assign name="areaName" value="area" />
                            <#assign name="selp" value="selprovince" />
                            <#assign name="selc" value="selcity" />
                            <#assign name="sela" value="selarea" />
                    </div>
                </div>
                <div class="form-group group-common">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>详细地址：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="form-control" size="50" id="address" value="" maxlength="50" name="address" type="text">
                        <button class="btn btn-danger"  onclick="goamap()" type="button"><i class="fa fa-map-marker fa-lg"></i> 点击地图选择详细GPS位置</button>
                        <span class="verify-tip">请点击地图获取详细地址!</span>
                    </div>
                </div>
                <div class="form-group">
                    <span class="control-label col-sm-2 col-xs-4 detail-span"><font color="red">*</font>经纬度：</span>
                    <div class="col-sm-9 col-xs-8">
                            <input type="text"  class="form-control" size="25" id="jwd" name="jwd" >
                        <span class="text-warning">中国的经纬度范围大约为：经度73.66~135.05，纬度3.86~53.55，示例：120.179218,30.285421</span>
                    </div>
                </div>
                <div class="form-group group-trip">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font> 性别：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input type="radio" name="sex" value="1" checked> 男 &nbsp;&nbsp;&nbsp;&nbsp;
                        <input type="radio" name="sex" value="0"> 女
                    </div>
                </div>
                <div class="form-group group-trip">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font> 出生年月：</span>
                    <div class="col-sm-9 col-xs-8">
                        <select class="form-control year" name="dateYear" id="dateYear"></select> 年 &nbsp;&nbsp;
                        <select class="form-control mouth" name="dateMouth" id="dateMouth"></select> 月
                        <select class="form-control day" name="dateMouth" id="dateDay"></select> 日
                    </div>
                </div>
                <div class="form-group group-trip group-person">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>身份证正面照片：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="obj-input" name="IDUrlObverse" value="" type="text">
                        <img class="obj-img" src="" style="display:none" width="100" height="100">
                        <span class="input-file">
                            <input type="file" data-action="goods" data-image="IDUrlObverse" onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">图片最大为3MB，格式为jpg,png.bmp</span>
                    </div>
                </div>
                <div class="form-group group-trip group-person">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>身份证反面照片：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="obj-input" name="IDUrlBack" value="" type="text">
                        <img class="obj-img" src="" style="display:none" width="100" height="100">
                        <span class="input-file">
                            <input type="file" data-action="goods" data-image="IDUrlBack" onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">图片最大为3MB，格式为jpg,png.bmp</span>
                    </div>
                </div>
                <div class="form-group group-common">
                    <span class="control-label col-sm-3 col-xs-4 detail-span tit-logo"><font color="red">*</font><em>头像</em>：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="obj-input" name="logo" value="" type="text">
                        <img class="obj-img" src="" style="display: none" width="100" height="100">
                        <span class="input-file">
                            <input data-image="logo" type="file" data-action="goods"  onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">图片最大为3MB，格式为jpg,png.bmp。</span>
                    </div>
                </div>
                <div class="form-group group-play group-car">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>企业形象图：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="obj-input" name="companyImg" value="" type="text">
                        <img class="obj-img" src="" style="display: none" width="100" height="100">
                        <span class="input-file">
                            <input data-image="companyImg" type="file" data-action="goods"  onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">图片最大为3MB，格式为jpg,png.bmp。</span>
                    </div>
                </div>
                <div class="form-group group-club">
                    <span class="control-label col-sm-3 col-xs-4 detail-span"><font color="red">*</font>营业执照：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="form-control input-number" name="licenseCon" value="" type="text" size="30">
                        <input class="obj-input" name="licenseImg" value="" type="text">
                        <img class="obj-img" src="" style="display: none" width="100" height="100">
                        <span class="input-file">
                            <input data-image="licenseImg" type="file" data-action="goods"  onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">图片最大为3MB，格式为jpg,png.bmp。</span>
                    </div>
                </div>
                <div class="form-group group-club">
                    <span class="control-label col-sm-3 col-xs-4 detail-span">税务登记证：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="form-control input-number" name="taxCon" value="" type="text" size="30">
                        <input class="obj-input" name="taxImg" value="" type="text">
                        <img class="obj-img" src="" style="display: none" width="100" height="100">
                        <span class="input-file">
                            <input data-image="taxImg" type="file" data-action="goods"  onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">图片最大为3MB，格式为jpg,png.bmp。</span>
                    </div>
                </div>
                <div class="form-group group-club">
                    <span class="control-label col-sm-3 col-xs-4 detail-span">组织机构代码：</span>
                    <div class="col-sm-9 col-xs-8">
                        <input class="form-control input-number" name="orgCon" value="" type="text" size="30">
                        <input class="obj-input" name="orgImg" value="" type="text">
                        <img class="obj-img" src="" style="display: none" width="100" height="100">
                        <span class="input-file">
                            <input data-image="orgImg" type="file" data-action="goods"  onchange="uploadImg(this)">
                        </span>
                        <span class="text-warning">图片最大为3MB，格式为jpg,png.bmp。</span>
                    </div>
                </div>
                <div class="form-group group-play group-club group-car">
                    <span class="control-label col-sm-3 col-xs-4 detail-span">企业介绍：</span>
                    <div class="col-sm-9 col-xs-8">
                        <textarea class="form-control" name="companyCon" cols="50" rows="6" placeholder="您可以简短介绍下您的企业，也可以稍后再完善"></textarea>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <div class="form-group bot-btn">
        <button type="button" class="btn btn-success">提交申请</button>
    </div>
</div>

<script src="${basePath}/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="${basePath}/bootstrap/plugin/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/bootstrap-validator/0.5.3/js/bootstrapValidator.min.js"></script>
<script type="text/javascript">
    $(window).bootstrapValidator || document.write('<script src="${basePath}/bootstrap/js/bootstrapValidator.min.js"><\/script>');
</script>
<script src="${basePath}/bootstrap/js/common.js" type="text/javascript"></script>
<script>
    $(function(){
        var box = $(".group-box");
        $("#module").change(function(){
            box.show();
            box.find(".form-group").hide();//重置
            box.find(".group-common").show();
            $(this).find("option").each(function(){
                var _this = $(this).attr("data-name");
                if($(this).is(":selected")){
                    $("."+_this).show();
                }
            });

            //头像/logo
            var $em = $(".tit-logo em");
            var val = $(this).val();
            if(val == "2" || val == "4"){
                $em.html("LOGO");
            }
            else if(val == "6"){
                $em.html("品牌标志图");
            }
            else if(val == ""){
                box.find(".group-common").hide();
            }
            else{
                $em.html("头像");
            }
        });

        //有无车
        var car = $(".car-brand");
        $("input[name='carFlag']").change(function () {
            if ($(this).val() == "1") {
                car.show();
            }
            else {
                car.hide();
            }
        });

        //选择年份/月份
        var $year,$mouth,$day;
        for (var i = 1960; i < 2017; i++) {
            $year += "<option value='" + i + "'>" + i + "</option>"
        }
        for (var j = 1; j <= 12; j++) {
            if (j < 10) {
                j = "0" + j
            }
            $mouth += "<option value='" + j + "'>" + j + "</option>"
        }
        for (var k = 1; k <= 31; k++) {
            if (k < 10) {
                k = "0" + k
            }
            $day += "<option value='" + k + "'>" + k + "</option>"
        }
        $("select.year").append($year);
        $("select.mouth").append($mouth);
        $("select.day").append($day);

        //验证码
        $(".code-btn").click(function(){
            getCode();
            Count($(this));
        })

    });
    //获取验证码
    function getCode(){
        var tel = $("#tel").val();
        $.ajax({
            type: 'GET',
            url: '${basePath}/api/member/sendCode?account='+tel+'&imageCodeType=1',
            dataType: 'json',
            cache: false,
            success: function(data) {
                if(data.code == "0"){
                    //校验验证码
                    var code = $("#code").val();
                    $.ajax({
                        type: 'GET',
                        url: '${basePath}/api/member/verifyCode?account='+tel+'&imageCodeType=1&authCode='+code+'',
                        dataType: 'json',
                        cache: false,
                        success: function(data) {
                            console.log(data)
                            if(data.code == "0"){
                                //提交
                                $(".submit").off("click").click(function(){
                                    submitForm();
                                })
                            }
                        },
                        error: function(){
                            alert("验证码错误")
                        }
                    })
                }
            },
            error: function(){
                alert("获取验证码失败")
            }
        })
    }
    //倒计时
    var Count = function(obj){
        var time = 60;//时间
        //定义时间
        var t = setInterval(function(){
            time --;
            obj.html(time + "s后重试");
            if(time == 59){
                obj.off("click");
                obj.css("background-color","#ccc");
            }
            else if(time == 0){
                clearInterval(t);
                obj.css("background-color","#FFBE34");
                obj.html("重新获取");
                obj.off("click").on("click",function(){
                    getCode();
                    Count(obj);
                });
            }
        },1000);
    };

    function submitForm() {
        var bsVal = $("#myForm").data('bootstrapValidator');
        bsVal.validate();
        if(bsVal.isValid()){
            $.ajax({
                type : 'POST',
                dataType: 'json',
                url:  '${basePath}/trip/add',
                data: $("#Form").serialize(),
                success: function (data) {
                    if(data!=null && data>0){
                        window.location.href="${basePath}/trip/addInfo?id="+data;
                    }else{
                        layer.alert(data.desc, {
                            icon : 5
                        });
                    }
                },
                error: function(){
                    layer.alert('系统错误', {
                        icon : 5
                    });
                }
            });

        }
        else{
            var smallTop = $("small:visible").eq(0).offset().top - 50;
            $("html,body").animate({scrollTop:smallTop},300);
        }
    }

    //表单验证
    $('#myForm').bootstrapValidator({
        fields: {
            name: {
                validators: {
                    notEmpty: {
                        message: '请输入姓名'
                    }
                }
            },
            cardId: {
                validators: {
                    notEmpty: {
                        message: '请输入身份证号码'
                    },
                    regexp: {
                        regexp: regId,
                        message: '请输入正确的身份证号码'
                    }
                }
            },
            IDUrlObverse: {
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '请上传身份证正面照片'
                    }
                }
            },
            IDUrlBack: {
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '请上传手持身份证反面照片'
                    }
                }
            },
            avatar: {
                trigger:"change",
                validators: {
                    notEmpty: {
                        message: '请上传头像'
                    }
                }
            },
            phone: {
                validators: {
                    notEmpty: {
                        message: '请输入手机号'
                    },
                    regexp: {
                        regexp: regTel,
                        message: '请输入正确的手机号'
                    }
                }
            },
            brandName: {
                validators: {
                    notEmpty: {
                        message: '请输入车辆品牌'
                    }
                }
            },
            homeTown: {
                validators: {
                    notEmpty: {
                        message: '请选择家乡'
                    }
                }
            },
            jwd: {
                validators: {
                    notEmpty: {
                        message: '经纬度不能为空'
                    }
                }
            },
            selcity: {
                selector: '[id="selcity"]',
                validators: {
                    notEmpty: {
                        message: '请选择所在城市'
                    }
                }
            }
        }
    });
</script>
</body>
</html>